<template>
    <div class="fmDe" v-if="historylist">
        <div class="fmDe_top">
            <div class="fmDe_top_li">
                <div
                    class="fmDe_top_li_l"
                    v-if="historylist&&historylist.userName"
                >{{userName(historylist.userName)}}</div>
                <div class="fmDe_top_li_r"></div>
            </div>
            <div class="fmDe_top_li">
                <div class="fmDe_top_li_l">年龄</div>
                <div class="fmDe_top_li_r">{{historylist.age}}</div>
            </div>
            <div class="fmDe_top_li">
                <div class="fmDe_top_li_l">孕周</div>
                <div class="fmDe_top_li_r">{{historylist.week}}+{{historylist.day}}</div>
            </div>
            <div class="fmDe_top_li">
                <div class="fmDe_top_li_l">监护时长</div>
                <div class="fmDe_top_li_r">{{historylist.costTime}}</div>
            </div>
            <div class="fmDe_top_li">
                <div class="fmDe_top_li_l">监护时间</div>
                <div class="fmDe_top_li_r">{{historylist.beginTime}}</div>
            </div>
            <div class="fmDe_top_li">
                <div class="fmDe_top_li_l">咨询时间</div>
                <div class="fmDe_top_li_r">{{historylist.consultTime||''}}</div>
            </div>
        </div>
        <div class="fmDe_h" v-if="historylist.riskFactorys.length">
            <div class="fmDe_ht">高危因素</div>
            <div>
                <div class="h_cent" v-for="(item, index) in historylist.riskFactorys" :key="index">
                    <img class="h_centim" src="../../../static/btn_selected@2x.png" />
                    {{item}}
                </div>
            </div>
        </div>
        <div class="fmDe_canvas">
            <div class="fmDe_canvas_t">
                <div class="fmDe_canvas_l">胎心率BPM</div>
                <div class="fmDe_canvas_r" @click="lookBig">
                    <img class="canvas_rm" src="../../../static/btn_bookbigpic@2x.png" />查看大图
                </div>
            </div>
            <div class="canvasbg">
                <div class="bgred"></div>
                
                <canvas
                    key="2"
                    disable-scroll="true"
                    @touchstart="touchLineA"
                    @touchmove="moveLineA"
                    @touchend="touchEndLineA"
                    canvas-id="canvasLineA"
                    id="canvasLineA"
                    class="charts"
                />
                <canvas
                    key="1"
                    disable-scroll="true"
                    @touchstart="touchLineA"
                    @touchmove="moveLineA"
                    @touchend="touchEndLineA"
                    canvas-id="canvasLineb"
                    id="canvasLineb"
                    class="charts1"
                />
            </div>
        </div>
        <div class="fmDe_result" v-if="status==4||status==5">
            <div class="result_top">报告结果</div>
            <div class="result_jg" v-if="historylist.result">
                <div class="result_jgspan"></div>
                {{ ' '+historylist.result}}
            </div>
            <div class="result_ys">医生建议：{{historylist.description}}</div>
        </div>
        <div class="fmDe_buto" v-if="status==4||status==5">
            报告说明：</br>
            1.分析结果仅供参考，尚需医生根据多种临床因素分析而定。
            2.请依据医生建议按时复诊或孕妇自感异常随时复诊。
        </div>
    </div>
</template>
<script>
import uCharts from "../../components/u-charts/u-charts.js";
var canvaLineA = null;
var canvaLineb = null;
var that;
/*下面是服务器返回的数据格式*/
var Data = {
    LineA: {
        categories: ["2012", "2013", "2014", "2015", "2016", "2017"],
        series: [
            {
                color: "#8D8D8D",
                data: [100, 180, 125, 137, 144, 120],
            },
        ],
    },
};

export default {
    data() {
        return {
            id: "",
            historylist: {
                userName:''
            },
            cWidth: "",
            cHeight: "",
            cHeight2: "",
            pixelRatio: 1,
            status:'',
            serverData: Data,
            monitorData: {}, // 获取到的数据
            currentDataTd: null, // 胎心
            currentDataTx: null, // 胎心
            currentDataGs: null, // 宫缩

            currentDataTd1: null, // 胎心
            currentDataTx1: null, // 胎心
            currentDataGs1: null, // 宫缩

            currentDataTd2: null, // 胎心
            currentDataTx2: null, // 胎心
            currentDataGs2: null, // 宫缩

            computedWidth: null, // 横坐标
        };
    },
    onLoad(option) {
        that=this
        var _this = this;
        if (option.id) {
            _this.id = option.id;
            _this.status= option.status;
            var top = '胎监详情'
            // if( _this.status==4|| _this.status==5){
            //     top = '胎监报告'
            // }else{
            //     top = '胎监详情'
            // }
            uni.setNavigationBarTitle({title:top})
            _this.getList();
        }
        //#ifdef MP-ALIPAY
        uni.getSystemInfo({
            success: function (res) {
                if (res.pixelRatio > 1) {
                    //正常这里给2就行，如果pixelRatio=3性能会降低一点
                    //_self.pixelRatio =res.pixelRatio;
                    _this.pixelRatio = 2;
                }
            },
        });
        //#endif
        this.cWidth = uni.upx2px(750);
        this.cHeight = uni.upx2px(400);
        this.cHeight2 = uni.upx2px(200);
    },
    async onPullDownRefresh() {
        // to doing..
        this.lodingtop();
        // 停止下拉刷新
    },
    methods: {
        lookBig(){
            var _this = this;
            uni.navigateTo({
                url: "./fmDebig?id=" + _this.id+'&status='+_this.status,
                animationType: "pop-in",
                animationDuration: 200,
            });
        },
        showLineA(canvasId, chartData) {
            var _this = this;
            var frodata = [];
            
            // for (var i = 110; i < 171; i++) {
            //     // if (i % 2 == 0) {
            //         var itm = {
            //             value: i,
            //             lineColor: "#ffe8f5",
            //         };
            //         frodata.push(itm);
            //     // }
            // }
            canvaLineA = new uCharts({
                $this: that,
                canvasId: canvasId,
                type: "line",
                fontSize: 11,
                legend: { show: false },
                dataLabel: false,
                rotate: false, //横屏
                dataPointShape: false,
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: _this.currentDataTx2,
                series: [
                    {    
                        
                        color: "#8D8D8D",
                        data: _this.currentDataTx1,
                    },
                ],
                // animation: true,
                enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#FF85B7",
                    itemCount: 2*2*45,
                    labelCount:1,
                    scrollShow: true,
                    scrollAlign: "left",
                    scrollBackgroundColor: "#F7F7FF",
                    scrollColor: "#DEE7F7",
                    axisLineColor: "#FFC0D9",
                    format: (val) => {
                        return val.toFixed(0)+'min';
                    },
                },
                yAxis: {
                    gridType: "solid",
                    gridColor: "#FFC0D9",
                    splitNumber: 10,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#FFC0D9",
                            gridType: "solid",
                            gridColor: "#FFC0D9",
                            min: 60,
                            max: 210,
                            format: (val) => {
                                return val;
                            },
                        },
                    ],
                },
                width: _this.cWidth * _this.pixelRatio,
                height: _this.cHeight * _this.pixelRatio,
                enableMarkLine: true,
                // extra: {
                //     line:{
                //         width:'1px',
                //         style:'straight'
                //     },
                    // markLine: {
                    //     type: "solid",
                    //     data: frodata,
                    // },
                    // markLine: {
                    //     type: "solid",
                    //     data: [
                    //         {
                    //             showLabel:true,
                    //             value:110,
                    //             lineColor: "#ffe8f5",
                    //         },
                    //         {
                    //             showLabel:true,
                    //             value: 170,
                    //             lineColor: "#ffe8f5",
                    //         },
                    //     ]
                    // },
                // },
                // extra: {
                //     area: {
                //         type:'straight',
                //         opacity: "0.6",
                //         daaLine:true,
                //         width:1
                //     },
                // },
            });
        },
        showLineb(canvasId, chartData) {
            var _this = this;
            canvaLineb = new uCharts({
                $this: that,
                canvasId: canvasId,
                type: "mix",
                fontSize: 11,
                legend: { show: false },
                dataLabel: false,
                rotate: false, //横屏
                dataPointShape: false,
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: _this.currentDataTx2,
                series: [
                    {
                        type: "line",
                        color: "#8D8D8D",
                        data: _this.currentDataTd1,
                    },
                    {
                        type: "line",
                        color: "#8D8D8D",
                        data: _this.currentDataGs1,
                    },
                ],
                // animation: true,
                enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disabled: true,
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#FF85B7",
                    itemCount: 2*2*45,
                    labelCount:1,
                    scrollShow: false,
                    scrollAlign: "left",
                    scrollBackgroundColor: "#F7F7FF",
                    scrollColor: "#DEE7F7",
                    axisLineColor: "#FFC0D9",
                    scrollBackgroundCo: "#FFFFFF",
                    scrollColor: "#FFFFFF",
                },
                yAxis: {
                    gridType: "solid",
                    gridColor: "#FFC0D9",
                    splitNumber: 5,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#FFC0D9",
                            gridType: "solid",
                            gridColor: "#FFC0D9",
                            min: 0,
                            max: 100,
                        },
                    ],
                },
                width: _this.cWidth * _this.pixelRatio,
                height: _this.cHeight2 * _this.pixelRatio,
                // extra: {
                //     line:{
                //         width:'2px',
                //         style:'straight'
                //     }
                // },
            });
        },
        touchLineA(e) {
            canvaLineA.scrollStart(e);
            canvaLineb.scrollStart(e);
        },
        moveLineA(e) {
            canvaLineA.scroll(e);
            canvaLineb.scroll(e);
        },
        touchEndLineA(e) {
            canvaLineA.scrollEnd(e);
            canvaLineb.scrollEnd(e);
        },

        // userName(username) {
        //     if (username) {
        //         return username.replace(/(?<=.)./g, "*");
        //     }
        //     return "";
        // },
        userName (name) {
            var newStr;
            if (name.length === 2) {
                newStr = name.substr(0, 1) + '*';
            } else if (name.length > 2) {
                var char = '';
                for (let i = 0, len = name.length - 2; i < len; i++) {
                    char += '*';
                }
                newStr = name.substr(0, 1) + char + name.substr(-1, 1);
            } else {
                newStr = name;
            }
            return newStr;
        },
        lodingtop() {
            this.getList();
            uni.stopPullDownRefresh();
        },
        gettime(milliSecond) {
            return this.geuti(milliSecond / 1000);
        },
        geuti(tims) {
            // 计算
            var h = 0,
                i = 0,
                s = parseInt(tims);
            if (s > 60) {
                i = parseInt(s / 60);
                s = parseInt(s % 60);
                if (i > 60) {
                    h = parseInt(i / 60);
                    i = parseInt(i % 60);
                }
            }
            // 补零
            var zero = function (v) {
                return v >> 0 < 10 ? "0" + v : v;
            };
            // return [zero(h),zero(i),zero(s)].join(":");
            return [zero(i), zero(s)].join(":");
        },
        getList() {
            var _this = this;
            var data = {
                id: _this.id,
            };
            // 【移动端】获取用户监测历史详情（胎监，胎心）
            _this.$ajaxs
                .get("/mobile/v1/monitor/getMonitorDetails", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                        _this.historylist.beginTime = _this.getFormat(
                            _this.historylist.beginTime
                        );
                        // fmFlag: 胎动     fhr1: 胎心率    toco: 宫缩曲线  tocoFlag: 宫缩复位  time: 检测时间
                        var tableList;
                        tableList = JSON.parse(
                            _this.historylist.dataMap.propertys[0].children[1]
                                .value
                        ); // 全部数据
                      var tableLists =tableList.filter((item,index) => (index % 2===0)||(item.fmFlag));
                      var tableList =tableLists.filter((item,index) => (index % 2===0)||(item.fmFlag));
                        if (tableList) {
                            var taixin = [];
                            var gongsuo = [];
                            var taidong = [];
                            for (var i = 0; i < tableList.length; i++) {
                                var taixinItm = [];
                                var gongsuoItm = [];
                                var time =
                                    (tableList[i].time - tableList[0].time) /
                                    1000 /
                                    60;
                                if (
                                    tableList[i].fhr1 <= 60 ||
                                    tableList[i].fhr1 >= 210
                                ) {
                                    tableList[i].fhr1 = null;
                                }
                                if (tableList[i].toco <= 0) {
                                    tableList[i].toco = null;
                                }
                                taixinItm.push(time, tableList[i].fhr1);
                                gongsuoItm.push(time, tableList[i].toco);
                                taixin.push(taixinItm);
                                gongsuo.push(gongsuoItm);
                                if (tableList[i].fmFlag) {
                                    taidong.push(80);
                                }else{
                                    taidong.push(null); 
                                }
                            }
                            var fitx = _this.filterdata(taixin);
                            var currentDataTx1 = [];
                            var currentDataTx2 = [];
                            var currentDataGs1 = [];
                            var currentDataGs2 = [];
                            for (var i = 0; i < fitx.length; i++) {
                                var itme = fitx[i];
                                    currentDataTx1.push(itme[1]);
                                    currentDataTx2.push(itme[0].toFixed(0)+'min');
                                    currentDataGs1.push(gongsuo[i][1]);
                            }
                            _this.currentDataTd1 = taidong;
                            _this.currentDataTx1 = currentDataTx1;
                            _this.currentDataTx2 = currentDataTx2;
                            _this.currentDataGs1 = currentDataGs1; //宫缩
                        }
                        _this.computedWidth =
                            Math.ceil(
                                (tableList[tableList.length - 1].time -
                                    tableList[0].time) /
                                    1000 /
                                    60
                            ) + 1;
                        _this.showLineA("canvasLineA");
                        _this.showLineb("canvasLineb");
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        filterdata(data) {
            // console.log(data,'ori')
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                if (i < data.length - 1) {
                    if (Math.abs(data[i][1] - data[i + 1][1]) > 30) {
                        var time =
                            Math.abs(data[i][0] - data[i + 1][0]) > 1
                                ? data[i][0] - 0 + 1
                                : data[i][0];
                        if (time == data[i][0]) {
                            arr.push([time, null]);
                        } else {
                            arr.push(data[i], [time, null]);
                        }
                    } else {
                        arr.push(data[i]);
                    }
                }
            }
            arr.push(data[data.length - 1]);
            // console.log(arr,'final')

            return arr;
        },
        getFormat(time) {
            // 时间戳转换
            if (time) {
                var data = new Date(time - 0);
                var y = data.getFullYear();
                var m =
                    data.getMonth() + 1 >= 10
                        ? data.getMonth() + 1
                        : "0" + (data.getMonth() + 1);
                var d =
                    data.getDate() > 10 ? data.getDate() : "0" + data.getDate();
                var h =
                    data.getHours() >= 10
                        ? data.getHours()
                        : "0" + data.getHours();
                var f =
                    data.getMinutes() >= 10
                        ? data.getMinutes()
                        : "0" + data.getMinutes();
                var s =
                    data.getSeconds() >= 10
                        ? data.getSeconds()
                        : "0" + data.getSeconds();
                return y + "-" + m + "-" + d + "  " + h + ":" + f + ":" + s;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.fmDe {
    background: #f8f8f8;
    color: #333;
    .fmDe_top {
        padding-left: 60upx;
        padding-bottom: 20upx;
        background: #fff;
        .fmDe_top_li {
            height: 80upx;
            line-height: 80upx;
            border-bottom: 1px solid #ddd;
            font-size: 28upx;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            padding: 0 40upx 0 20upx;
            font-weight: 500;
            .fmDe_top_li_l {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
            }
            .fmDe_top_li_r {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                text-align: right;
                color: #fa4d93;
            }
        }
    }
    .fmDe_h {
        width: 100%;
        margin: 20upx 0 0 0;
        padding: 20upx 40upx;
        background: #fff;
        .h_cent {
            display: inline-block;
            line-height: 70upx;
            height: 70upx;
            margin-left: 30upx;
            vertical-align: middle;
            .h_centim {
                vertical-align: middle;
                width: 35upx;
                height: 35upx;
            }
        }
        .h_cent:nth-of-type(1) {
            margin-left: 20upx;
        }
    }
    .fmDe_canvas {
        margin-top: 20upx;
        background: #fff;
        .fmDe_canvas_t {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            padding: 0 20px;
            .fmDe_canvas_l {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                height: 80upx;
                line-height: 80upx;
            }
            .fmDe_canvas_r {
                height: 80upx;
                line-height: 80upx;
                text-align: right;
                .canvas_rm {
                    vertical-align: middle;
                    width: 26upx;
                    height: 32upx;
                }
            }
        }
        .canvasbg{
            position: relative;
            .bgred{
                position: absolute;
                width: 100%;
                top: 106upx;
                height: 130upx;
                background: rgba(250,77,177, 0.17);
            }
        }
        .charts {
            width: 100%;
            height: 400upx;
        }
        .charts1 {
            width: 100%;
            height: 200upx;
        }
    }
    .fmDe_result{
        margin-top: 20upx;
        padding: 30upx 60upx;
        background: #fff;
        .result_jg{
            color: #666;
            height: 60upx;
            line-height: 60upx;
            .result_jgspan{
                width: 34upx;
                height: 34upx; 
                display: inline-block;
                border-radius: 50%;
                background: #FA4D93;
                vertical-align: middle;
            }
        }
        .result_ys{
            color: #666;
        }
    }
    .fmDe_buto{
        color: #FA4D93;
        font-size:24upx;
        padding: 20upx 60upx;
    }
}
</style>